<script setup>
import {ref, onMounted, computed, inject} from 'vue'
import {useRoute} from 'vue-router'
import axios from 'axios'
import {ElMessage} from 'element-plus'
import Home from '@/components/Organization/home/Home.vue'
import News from '@/components/Organization/news/News.vue'
import Resource from '@/components/Organization/resource/Resource.vue'
import Demond from '@/components/Organization/demond/Demond.vue'

const userinfo=inject('userinfo')

const route=useRoute()
const id=ref(route.params.id)

const organization=ref(null)
const not_found=ref(false)
onMounted(async()=>{
    try{
        var ret=await axios.get(`/api/organization/${id.value}`)
        organization.value=ret.data
    }catch(err){
        if(err.response?.status==404){
            ElMessage.warning('找不到该企业！')
        }else{
            console.error(err)
            ElMessage.error('服务器内部错误！')
        }
        not_found.value=true
    }
})

const activeName=ref('Home')
</script>

<template>
<div>
    <div class="not-found" v-if="not_found">
        <span>Page not found</span>
        <img src="/img/404.png" />
    </div>
    <Transition mode="out-in">
        <div class="tabs" v-if="organization">
            <el-tabs v-model="activeName" type="border-card">
                <el-tab-pane label="简介" name="Home"><Home v-model:organization="organization"/></el-tab-pane>
                <el-tab-pane label="新闻" name="News"><News v-model:organization="organization"/></el-tab-pane>
                <el-tab-pane label="资源" name="Resource"><Resource v-model:organization="organization"/></el-tab-pane>
                <el-tab-pane label="需求" name="Demond"><Demond v-model:organization="organization"/></el-tab-pane>
            </el-tabs>
        </div>
    </Transition>
</div>
</template>

<style lang="scss" scoped>
.not-found{
    display:flex;
    flex-direction:column;
    align-items:center;
    span{
        margin-top:20px;
        margin-bottom:20px;
        font-size:x-large;
        font-weight:bolder;
    }
    img{
        width:300px;
    }
}
.tabs{
    width:100%;
}
.v-enter-active,
.v-leave-active {
    transition: opacity 1s ease;
}
.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>